HTMLify
index.html
Views: 13 | Author: cody
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>GSAP Hover Animation</title>
</head>
<body>
<div class="img-gallery-wrapper" data-scroll-wrapper>
<div class="img-gallery-ctr" data-scroll-ctr>
<div class="img-gallery_content">
<img src="https://i.pinimg.com/564x/d7/1f/de/d71fdefc2807e04725c36c1be25c8de4.jpg" alt="Cover" />
</div>
<div class="img-gallery_content">
<img src="https://images.unsplash.com/photo-1619087940820-d3fcb8a26b56?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80" alt="Cover" />
</div>
<div class="img-gallery_content">
<img src="https://images.unsplash.com/photo-1599669846660-945c5c775181?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80" alt="Cover" />
</div>
<div class="img-gallery_content">
<img src="https://images.unsplash.com/photo-1682687220015-186f63b8850a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1075&q=80" alt="Cover" />
</div>
<div class="img-gallery_content">
<img src="https://media.cnn.com/api/v1/images/stellar/prod/201221102826-airpods-max.jpg?q=x_2,y_0,h_1130,w_2008,c_crop/h_540,w_960/f_webp" alt="Cover" />
</div>
<div class="img-gallery_content">
<img src="https://images.pexels.com/photos/3721098/pexels-photo-3721098.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Cover" />
</div>
<div class="img-gallery_content">
<img src="https://i.pinimg.com/564x/74/16/9d/74169d2c69f5ec4a1be705b928940165.jpg" alt="Cover" />
</div>
<div class="img-gallery_content">
<img src="https://i.pinimg.com/564x/f7/0c/a0/f70ca0ff3073bbe93cd4584fbbc35ecd.jpg" alt="Cover" />
</div>
</div>
</div>
<button class="btn">Change Layout</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script src="https://assets.codepen.io/16327/Flip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/CustomEase.min.js"></script>
<script src="app.js"></script>
</body>
</html>